<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="350px"
    :before-close="beforeClose"
  >
    <el-upload
      ref="photoUpload"
      :action="photoUrl"
      :limit="1"
      :auto-upload="true"
      :headers="headers"
      :on-success="onSuccess"
    >
      <div>
        <img
          :src="photoUrl"
          style="max-width: 300px"
          alt="无照片"
        >
      </div>
      <template #trigger>
        <el-button
          class="ml-3"
          type="primary"
        >
          选择文件
        </el-button>
      </template>
    </el-upload>
  </el-dialog>
</template>

<script>
import { jwt } from '../../utils/jwt.js'

export default {
    name: "PhotoUpload",
    data() {
      return {
        id: '',
        title: '照片',
        dialogVisible: false,
        studentId: '',
        photoUrl: '',
        headers: {
          // Authorization: ''
        }
      }
    },
  methods: {
      handleUpload(student) {
        this.id = student.id
        this.title = student.name
        this.photoUrl = import.meta.env.VITE_APP_BASE_API + '/student/' + this.id + "/photo?" + new Date().getTime()
        // this.headers.Authorization = 'Bearer ' + jwt.token
        this.dialogVisible = true
      },
      onSuccess() {
        this.photoUrl = import.meta.env.VITE_APP_BASE_API + '/student/' + this.id + "/photo?" + new Date().getTime();
      },
    beforeClose() {
      console.log('before close')
      console.log(this.$refs.photoUpload)
      this.$refs.photoUpload.clearFiles()
      this.dialogVisible = false
      return true
    }
    }
}
</script>

<style scoped />
